<template>
  <div>
    <video class="demo-video" ref="player" muted autoplay></video>
  </div>
</template>
<script>
import flvjs from "flv.js"
export default {
  props: {
    rtsp: {
      type: String,
      default: "rtsp://admin:admin@192.168.1.10:554",
    },
    id: {
      type: String,
      default: "1",
    },
  },
  data () {
    return {
      // id: "1",
      player: null
    }
  },
  mounted () {
    if (flvjs.isSupported()) {
      let video = this.$refs.player
      if (video) {
        this.player = flvjs.createPlayer({
          type: "flv",
          isLive: true,
          url: `ws://192.168.1.43:8888/rtsp/${this.id}/?url=${this.rtsp}`
        })
        this.player.attachMediaElement(video)
        try {
          this.player.load()
          this.player.play()
        } catch (error) {
          console.log(error)
        };
      }
      // if (video) {
      //     this.player = flvjs.createPlayer({
      //         type: "flv",
      //         url: `/static/test.flv`
      //     });
      //     this.player.attachMediaElement(video);
      //     try {
      //         this.player.load();
      //         this.player.play();
      //     } catch (error) {
      //         console.log(error);
      //     };
      // }
    }
  },
  beforeDestroy () {
    if (this.player) {
      this.player.unload()
      this.player.destroy()
      this.player = null
    }
  }
}
</script>
<style>
.demo-video {
  /* max-width: 880px;
  max-height: 660px; */
  height: 300px;
  width: 500px;
}
</style>